<template lang="html">
    <panel :title='title'>
      <slot></slot>
      <div
        class ='x-bar'
        :id="chartid"
        ></div>
    </panel>
</template>

<script>
import Panel from '../chartPanel.vue'
// import {newline} from '../../util/tool'
export default {
  components : {
    Panel,
  },
  props : {
    chartid : {
      type : String,
    },
    title : {
      type : String,
    },
    option : {
      type : Object,
    },

  },
  data(){
    return {
      chart : ''
    }
  },
  watch : {
    option: {
     handler(newVal, oldVal) {
      if (this.chart) {
       if (newVal) {
        this.chart.setOption(newVal);
       } else {
        this.chart.setOption(oldVal);
       }
      } else {
        this.init();
      }
     },
     deep: true
  }
  },
  methods : {
    init() {
     this.chart = this.$echarts.init(document.getElementById(this.chartid));
     this.chart.setOption(this.option);
     window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  div.x-bar {
    width: 100%;
    height: 90%;
  }

</style>
